<script>
import outMain from "@/components/outMain.vue";
import tableBigImg from "@/components/public/tableBigImg.vue";
import upMoreImg from "@/components/public/upMoreImg.vue";
import { ElMessage, ElMessageBox } from "element-plus";
import {
  comDetail,
  qyjl,
  glfjs,
  glfjsSave,
  settlementRecordScpz,
} from "@/http/api";
export default {
  components: { outMain, upMoreImg, tableBigImg },
  name: "",
  data() {
    return {
      detailId: this.$route.query.id,
      stepArr: [
        { name: "基本信息", id: 1 },
        { name: "签约记录", id: 2 },
        { name: "管理费结算", id: 3 },
      ],
      stepId: 1,
      tableData: [],
      statusArr: [
        { label: "全部", value: "" },
        { label: "已结算", value: "2" },
        { label: "未结算", value: "1" },
      ],
      queryData: {
        time: "",
        c_enterprise_id: this.$route.query.id,
        js_status: "",
        page: 1,
        per_page: 20,
      },
      total: 0,
      formData: {},
      upRow: {},
      showUpRow: false,
      upImgFiles: "",
    };
  },
  props: {},
  setup() {},
  methods: {
    linkFn(url, id, navId) {
      console.log(id);
      if (id != 0) {
        this.$router.push({ path: url, query: { id: id, navId: navId } });
      }
    },

    detailFn(id) {
      this.$router.push({
        path: "/bootSignDetail",
        query: { id: id },
      });
    },
    upImg(row) {
      this.upRow = row;
      this.showUpRow = true;
      this.upImgFiles = "";
    },
    getImg(url) {
      this.upImgFiles = url;
    },
    saveUpImg() {
      if (!this.upImgFiles) {
        ElMessage({
          type: "error",
          message: "请上传结算的凭证图片",
        });
        return false;
      }
      let data = {
        c_enterprise_js_id: this.upRow.c_enterprise_js_id,
        js_voucher: this.upImgFiles,
      };
      settlementRecordScpz(data).then((res) => {
        if (res.data.code == 1) {
          ElMessage({
            type: "success",
            message: "操作成功",
          });
          getGlf;
          this.getGlf();
          this.showUpRow = false;
        }
      });
    },
    navFn(item) {
      this.stepId = item.id;
      if (item.id !== 1) {
        this.queryData.page = 1;
        this.serchFn();
      }
    },
    serchFn() {
      if (this.stepId === 2) {
        this.getSign();
      } else if (this.stepId === 3) {
        this.getGlf();
      }
    },
    getMonthTime(time) {
      const y = time.getFullYear();
      const m =
        time.getMonth() < 9 ? `0${time.getMonth() + 1}` : time.getMonth() + 1;
      const str = `${y}-${m}`;
      return str;
    },
    async getGlf() {
      let paramsData = { ...this.queryData };
      console.log(paramsData);
      if (paramsData.time) {
        paramsData.time = this.getMonthTime(paramsData.time);
      }
      const { data } = await glfjs(paramsData);
      if (data.code == 1) {
        this.tableData = data.data.data;
        this.total = data.data.total;
      }
    },
    async getSign() {
      const { data } = await qyjl(this.queryData);
      if (data.code == 1) {
        this.tableData = data.data.data;
        this.total = data.data.total;
      }
    },
    getData() {
      comDetail({ c_enterprise_id: this.detailId }).then((res) => {
        if (res.data.code == 1) {
          this.formData = res.data.data;
        }
      });
    },
    saveFn(row) {
      ElMessageBox.confirm(
        `确定船东已打款${row.content}的管理费,船员薪资及船员社保吗?`,
        "操作提示",
        {
          confirmButtonText: "确定",
          cancelButtonText: "取消",
          type: "warning",
        }
      ).then(async () => {
        const { data } = await glfjsSave({
          shipowner_manage_money_id: row.shipowner_manage_money_id,
        });
        if (data.code == 1) {
          ElMessage({
            type: "success",
            message: "操作成功",
          });
          this.getGlf();
        }
      });
    },
    loadData(id) {
      if (id == 0) {
        return false;
      }
      this.$router.push({
        path: "/cooperationBooterDetail",
        query: { id: id },
      });
      this.detailId = id;
      this.getData();
      this.stepId = 1;
      this.queryData.c_enterprise_id = id;
    },
    backFn() {
      this.$router.back();
    },
  },
  mounted() {},
  created() {
    this.getData();
  },
};
</script>
<template>
  <outMain>
    <div class="formCont">
      <div class="formStep">
        <div class="formHead">
          <div>企业合作详情</div>
          <btn value="返回上一级" @ok="backFn"></btn>
        </div>
        <div class="formMain">
          <div class="stepNav">
            <div
              :class="stepId === item.id ? 'stepItemActive' : 'stepItem'"
              @click="navFn(item)"
              :key="index"
              v-for="(item, index) in stepArr"
            >
              {{ item.name }}
            </div>
          </div>
          <div class="stepCont" v-if="stepId == 1">
            <div class="formDes">
              <div class="desTitle">基本信息</div>
              <div class="desCont">
                <div class="desItem">
                  <div class="desName">企业名称</div>
                  <div class="desText">{{ formData.c_enterprise_name }}</div>
                </div>
                <div class="desItem">
                  <div class="desName">状态</div>
                  <div class="desText">
                    <el-tag v-if="formData.c_enterprise_status == 1"
                      >待审核</el-tag
                    >
                    <el-tag
                      type="success"
                      v-if="formData.c_enterprise_status == 2"
                      >正常</el-tag
                    >
                    <el-tag
                      type="danger"
                      v-if="formData.c_enterprise_status == 3"
                      >已驳回</el-tag
                    >
                  </div>
                </div>
                <div class="desItem">
                  <div class="desName">所属城市</div>
                  <div class="desText">{{ formData.c_enterprise_city }}</div>
                </div>
                <div class="desItem">
                  <div class="desName">负责人</div>
                  <div class="desText">{{ formData.c_enterprise_person }}</div>
                </div>
                <div class="desItem">
                  <div class="desName">手机号</div>
                  <div class="desText">{{ formData.c_enterprise_mobile }}</div>
                </div>
                <div class="desItem">
                  <div class="desName">岗位数量</div>
                  <div class="desText">{{ formData.gw_num }}个</div>
                </div>
                <div class="desItem">
                  <div class="desName">签约船员</div>
                  <div class="desText">{{ formData.qy_user_num }}个</div>
                </div>
                <div class="desItem">
                  <div class="desName">修改时间</div>
                  <div class="desText">{{ formData.update_time }}</div>
                </div>
                <div class="desItem">
                  <div class="desName">创建时间</div>
                  <div class="desText">{{ formData.create_time }}</div>
                </div>
                <div class="desItem">
                  <div class="desName">创建员工</div>
                  <div class="desText">
                    <span
                      :class="formData.c_staff_id == 0 ? '' : 'linkText_'"
                      @click="linkFn('/staffListDetail', formData.c_staff_id)"
                      >{{ formData.c_staff_name }}</span
                    >
                  </div>
                </div>
                <div class="desItem">
                  <div class="desName">管理费结算</div>
                  <div class="desText">
                    <el-tag v-if="formData.wait_js_count == 0">无需结算</el-tag>
                    <el-tag type="danger" v-if="formData.wait_js_count > 0"
                      >待结算({{ formData.wait_js_count }})</el-tag
                    >
                  </div>
                </div>
              </div>
            </div>
            <div class="formDes flexPull flexColumn">
              <div class="desTitle">关联船舶</div>
              <div class="desCont noFlex">
                <el-table
                  class="tableMain"
                  :data="formData.c_watercraft"
                  stripe
                  style="width: 100%"
                >
                  <el-table-column
                    prop="watercraft_name"
                    show-overflow-tooltip
                    label="船名"
                  />
                  <el-table-column
                    prop="watercraft_colors"
                    show-overflow-tooltip
                    label="旗号"
                  />
                  <el-table-column
                    prop="watercraft_hh"
                    show-overflow-tooltip
                    label="呼号"
                  />
                  <el-table-column
                    prop="watercraft_imo"
                    show-overflow-tooltip
                    label="imo"
                  />
                  <el-table-column
                    prop="watercraft_type"
                    show-overflow-tooltip
                    label="船舶类型"
                  />
                  <el-table-column
                    prop="watercraft_area"
                    show-overflow-tooltip
                    label="船舶航区"
                  />
                  <el-table-column
                    prop="watercraft_area"
                    show-overflow-tooltip
                    label="载货量"
                  >
                    <template #default="{ row }">
                      {{ row.watercraft_num }}{{ row.watercraft_dw }}
                    </template>
                  </el-table-column>
                  <el-table-column
                    prop="watercraft_zcsj"
                    show-overflow-tooltip
                    label="造船时间"
                  />
                </el-table>
              </div>
            </div>
          </div>
          <div class="stepCont" v-if="stepId == 2">
            <div class="formDes flexPull flexColumn">
              <div class="desTitle">签约记录（{{ total }}）</div>
              <el-table
                class="tableMain"
                :data="tableData"
                stripe
                style="width: 100%"
              >
                <el-table-column
                  prop="cy_sign_number"
                  show-overflow-tooltip
                  label="签约单号"
                />

                <el-table-column
                  prop="qy_enterprise_name"
                  show-overflow-tooltip
                  label="船东名称"
                >
                  <template #default="{ row }">
                    <span
                      :class="row.qy_enterprise_id == 0 ? '' : 'linkText_'"
                      @click="loadData(row.qy_enterprise_id)"
                    >
                      {{ row.qy_enterprise_name }}
                    </span>
                  </template>
                </el-table-column>
                <el-table-column
                  width="150"
                  prop="qy_real_name"
                  show-overflow-tooltip
                  label="签约船员"
                >
                  <template #default="{ row }">
                    <span
                      class="linkText_"
                      @click="
                        linkFn('/bootSignDetail', row.qy_biographical_notes_id)
                      "
                    >
                      {{ row.qy_real_name }}
                    </span>
                  </template>
                </el-table-column>
                <el-table-column
                  prop="qy_staff_name"
                  width="150"
                  show-overflow-tooltip
                  label="操作员工"
                >
                  <template #default="{ row }">
                    <span
                      class="linkText_"
                      @click="linkFn('/staffListDetail', row.qy_staff_id)"
                    >
                      {{ row.qy_staff_name }}
                    </span>
                  </template>
                </el-table-column>
                <el-table-column
                  prop="create_time"
                  show-overflow-tooltip
                  width="200"
                  label="签约时间"
                />
              </el-table>
              <div class="pageCont">
                <el-pagination
                  v-model:currentPage="queryData.page"
                  v-model:page-size="queryData.per_page"
                  background
                  layout="total, prev, pager, next, jumper"
                  :total="total"
                  @size-change="serchFn"
                  @current-change="serchFn"
                />
              </div>
            </div>
          </div>
          <div class="stepCont" v-if="stepId == 3">
            <div class="formDes flexPull flexColumn">
              <div class="desTitle">
                <div>管理费结算（{{ total }}）</div>
                <div class="serchRight">
                  <el-form class="flexCenter" :inline="true">
                    <el-form-item style="margin-bottom: 0">
                      <el-select
                        v-model="queryData.js_status"
                        clearable
                        @change="serchFn"
                        placeholder="请选择"
                      >
                        <el-option
                          v-for="item in statusArr"
                          :key="item.value"
                          :label="item.label"
                          :value="item.value"
                        />
                      </el-select>
                    </el-form-item>
                    <el-form-item style="margin-bottom: 0">
                      <el-date-picker
                        clearable
                        @change="serchFn"
                        style="width: 200px; font-weight: normal"
                        v-model="queryData.time"
                        type="month"
                        placeholder="选择月份"
                      />
                    </el-form-item>
                    <btn
                      value="搜索"
                      style="margin-top: 0"
                      @click="serchFn"
                    ></btn>
                  </el-form>
                </div>
              </div>
              <el-table
                class="tableMain"
                :data="tableData"
                stripe
                style="width: 100%"
              >
                <el-table-column
                  prop="js_order_number"
                  width="160"
                  show-overflow-tooltip
                  label="结算单号"
                />
                <el-table-column
                  prop="qy_real_name"
                  show-overflow-tooltip
                  label="船员姓名"
                />
                <el-table-column show-overflow-tooltip label="管理费">
                  <template #default="{ row }">
                    {{ row.gl_money_dw == 1 ? "¥" : "$" }}
                    {{ row.gl_money }}</template
                  >
                </el-table-column>
                <el-table-column show-overflow-tooltip label="社保费">
                  <template #default="{ row }">
                    {{ row.sb_money_dw == 1 ? "¥" : "$" }}
                    {{ row.sb_money }}</template
                  >
                </el-table-column>
                <el-table-column show-overflow-tooltip label="船员薪资">
                  <template #default="{ row }">
                    {{ row.xz_money_dw == 1 ? "¥" : "$" }}
                    {{ row.xz_money }}</template
                  >
                </el-table-column>
                <el-table-column show-overflow-tooltip label="结算状态">
                  <template #default="{ row }">
                    <div class="tagGroup">
                      <el-tag
                        type="danger"
                        v-if="row.c_enterprise_js_status == 1"
                        >未结算</el-tag
                      >
                      <el-tag
                        type="success"
                        v-if="row.c_enterprise_js_status == 2"
                        >已结算</el-tag
                      >
                    </div>
                  </template>
                </el-table-column>
                <el-table-column
                  prop="content"
                  show-overflow-tooltip
                  label="结算月份"
                />
                <el-table-column
                  width="180"
                  prop="c_enterprise_js_time"
                  show-overflow-tooltip
                  label="结算时间"
                />
                <el-table-column prop="Name" width="130" label="操作">
                  <template #default="{ row }">
                    <div class="tableCtrl">
                      <div
                        class="greenText ctrlText"
                        @click="detailFn(row.cy_sign)"
                      >
                        详情
                      </div>
                      <div
                        v-if="row.c_enterprise_js_status == 1"
                        class="blueText ctrlText"
                        @click="saveFn(row)"
                      >
                        已结算
                      </div>
                    </div>
                  </template>
                </el-table-column>
              </el-table>
              <div class="pageCont">
                <el-pagination
                  v-model:currentPage="queryData.page"
                  v-model:page-size="queryData.per_page"
                  background
                  layout="total, prev, pager, next, jumper"
                  :total="total"
                  @size-change="serchFn"
                  @current-change="serchFn"
                />
              </div>
            </div>
          </div>
        </div>
      </div>
      <el-dialog
        v-model="showUpRow"
        title="结算凭证"
        width="500"
        :close-on-click-modal="false"
      >
        <div>
          <upMoreImg v-if="showUpRow" @ok="getImg"></upMoreImg>
        </div>
        <template #footer>
          <div class="dialog-footer">
            <el-button @click="showUpRow = false">取消</el-button>
            <el-button type="primary" @click="saveUpImg"> 确认 </el-button>
          </div>
        </template>
      </el-dialog>
    </div>
  </outMain>
</template>
<style scoped lang="less"></style>
